<!DOCTYPE html>
<html>
<style>
    html,
    body {
        position: relative;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .target,
    .target2 {
        position: absolute;
        background: #faa;
        box-sizing: border-box;
    }

    .target.selected {
        border: 4px solid #f55;
    }

    .button {
        position: absolute;
        left: 500px;
        top: 50px;
        background: #eee;
        padding: 15px 40px;
        display: inline-block;
        border-radius: 5px;
        font-weight: bold;
        color: #444;
    }

    .button.selected {
        color: #fff;
        background: #66d;
    }
</style>

<body>
    <div class="button"> Shift </div>
    <div class="target" style="top: 50px; left: 50px; width: 50px; height: 50px">T1</div>
    <div class="target" style="top: 50px; left: 150px; width: 150px; height: 50px">T2</div>
    <div class="target" style="top: 150px; left: 50px; width: 100px; height: 50px">T3</div>
    <div class="target" style="top: 300px; left: 250px; width: 50px; height: 150px">T4</div>
    <div class="target" style="top: 200px; left: 400px; width: 100px; height: 0px"></div>

    <div class="target2" style="top: 330px; left: 80px; width: 120px; height: 120px" contenteditable="true">T7</div>


    <svg>
        <line class="target" x1="50" x2="50" y1="0" y2="50" stroke-width="10" stroke="#000000"></line>
    </svg>

</body>
<script src="../../dist/selecto.js"></script>

<div class="hi"></div>
<script>

    const selecto = new Selecto({
        container: document.body,
        // rootContainer: document.body,
        // boundContainer: true,
        // ratio: 1,
        // dragCondition: () => false,
        hitRate: 10,
        // ratio: 0,
        selectableTargets: [".target"],
        selectFromInside: false,
        selectByClick: true,
        clickBySelectEnd: true,
        // checkInput: true,
        // preventDragFromInside: false,
        toggleContinueSelect: "shift",
        // continueSelectWithoutDeselect: true,
    }).on("dragStart", e => {
        console.log("ds", e.inputEvent.target);
    }).on("drag", e => {
        // selecto.findSelectableTargets();
    }).on("selectStart", e => {
        console.log("start", e);
        e.added.forEach(el => {
            el.classList.add("selected");
        });
        e.removed.forEach(el => {
            el.classList.remove("selected");
        });
    }).on("selectStart", () => {
        setTimeout(() => {
            document.body.insertAdjacentHTML("beforeend", `<div class="target" style="top: 300px; left: 50px; width: 50px; height: 50px">T6</div>`);
        });
    }).on("select", e => {
        console.log(e.removed, e.added);
    }).on("selectEnd", e => {
        if (e.isDouble) {
            console.log("dblclick");
        }
        console.log("end", e);
        e.afterAdded.forEach(el => {
            el.classList.add("selected");
        });
        e.afterRemoved.forEach(el => {
            el.classList.remove("selected");
        });
    }).on("keydown", () => {
        document.querySelector(".button").classList.add("selected");
    }).on("keyup", () => {
        document.querySelector(".button").classList.remove("selected");
    });
</script>

</html>